<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
      :rules="rules"
    >
      <template slot="date">
        <el-form-item prop="date">
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
            :disable-date="{ range: 24 * 3600 * 31 * 1000 }"
          />
        </el-form-item>
      </template>
      <template slot="address">
        <el-form-item>
          <HycAddressCascader ref="area" v-model="form.area" />
        </el-form-item>
      </template>
      <template slot="duration">
        <el-form-item>
          <div class="order-timecard-list__duration">
            <el-input
              v-model="form.chargeDurationStart"
              placeholder="最小充电时长(分钟)"
            />
            <span class="order-timecard-list__duration__seperator"></span>
            <el-input
              v-model="form.chargeDurationEnd"
              placeholder="最大充电时长(分钟)"
            />
          </div>
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import formatter, { typeMap } from '@/utils/format'
import TableSearch from '@/components/TableSearch'
import { chargeOrderList, exportOrderPage } from '@/api/order'
import HycAddressCascader from '@/components/hycAddressCascader'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'

const orderStatus = {
  ABNORMAL: '异常订单',
  ONGOING: '进行中',
  NOTCHECK: '未对账',
  CHECKED: '已对账',
  PAID: '已付款账单',
  UNSETTLED: '待结算账单',
  SETTLED: '已结算账单',
  CHARGEEND: '充电结束订单',
}

export default {
  name: 'OrderList',
  components: { TableSearch, HycAddressCascader },
  data() {
    return {
      rules: {
        date: [
          {
            validator: (rule, value, callback) => {
              if (
                !this.form.startTime ||
                this.form.startTime === '' ||
                !this.form.endTime ||
                this.form.endTime === ''
              ) {
                // callback(new Error('必须选择开始和结束时间,间隔一个月'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      form: {
        appealNum: '',
        startTime:
          new Date(
            new Date(new Date().toLocaleDateString()).getTime()
          ).valueOf() -
          30 * 24 * 3600 * 1000,
        endTime:
          new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1,
      },
      tableBtns: [
        {
          label: '导出',
          resourceId: '/web/order-management/charge-order-management/导出',
          isExport: true,
          startDownload: (callback) => {
            let params = cloneDeep(this.form)
            if (params.orderStatus) {
              params.orderStatus = [params.orderStatus]
            }
            if (params.chargeDurationStart) {
              params.chargeDurationStart = Number(params.chargeDurationStart)
            }

            if (params.chargeDurationEnd) {
              params.chargeDurationEnd = Number(params.chargeDurationEnd)
            }
            if (params.area && params.area.province)
              params.province = params.area.province
            if (params.area && params.area.city) params.city = params.area.city
            if (params.area && params.area.district)
              params.district = params.area.district

            exportOrderPage({
              ...params,
              pageSize: 10,
              currentPage: 1,
            })
              .then((res) => {
                callback(res)
              })
              .catch((err) => {
                console.log(err)
              })
          },
        },
      ],
      searchPath: '/web/order-management/charge-order-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'billNum',
          placeholder: '订单号',
          clearable: true,
          resourceId: '/web/order-management/charge-order-management/订单号',
        },
        {
          type: 'text',
          value: 'userMobile',
          placeholder: '用户手机号',
          clearable: true,
          resourceId:
            '/web/order-management/charge-order-management/用户手机号',
        },
        {
          type: 'text',
          value: 'deviceId',
          placeholder: '设备号',
          clearable: true,
        },
        {
          slot: 'SearchDatePicker',
        },
        {
          type: 'text',
          value: 'merchantName',
          placeholder: '代理商',
          clearable: true,
          resourceId: '/web/order-management/charge-order-management/代理商',
        },
        {
          type: 'text',
          value: 'stationName',
          placeholder: '电站名',
          clearable: true,
          resourceId: '/web/order-management/charge-order-management/所属电站',
        },
        {
          slot: 'date',
        },
        {
          type: 'select',
          value: 'appealNum',
          options: [
            {
              label: '是',
              value: 1,
            },
            {
              label: '否',
              value: 0,
            },
          ],
          placeholder: '申述状态',
          clearable: true,
          resourceId: '/web/order-management/charge-order-management/申述状态',
        },
        {
          type: 'select',
          value: 'orderStatus',
          options: () => {
            return Object.keys(orderStatus).map((item) => {
              return {
                label: orderStatus[item],
                value: item,
              }
            })
          },
          placeholder: '订单状态',
          clearable: true,
          resourceId: '/web/order-management/charge-order-management/订单状态',
        },
        {
          type: 'select',
          value: 'payStatus',
          options: typeMap.selectOptions([], 'payStatus'),
          placeholder: '请选择支付状态',
          clearable: true,
          resourceId: '/web/order-management/charge-order-management/支付状态',
        },
        {
          slot: 'address',
        },
        {
          slot: 'duration',
        },
      ],
      loading: false,
      tableData: {},
      columns: [
        {
          label: '订单号',
          prop: 'billNum',
          resourceId: '/web/order-management/charge-order-management/订单号',
        },
        {
          label: '开始充电时间',
          prop: 'chargeStartTime',
          formatter: (row) => {
            return dayjs(row.chargeStartTime).format('YYYY-MM-DD HH:mm:ss')
          },
          resourceId:
            '/web/order-management/charge-order-management/开始充电时间',
        },
        {
          label: '用户手机号',
          prop: 'userMobile',
          resourceId:
            '/web/order-management/charge-order-management/用户手机号',
        },
        {
          label: '代理商',
          prop: 'operatorName',
          resourceId: '/web/order-management/charge-order-management/代理商',
        },
        {
          label: '所属电站',
          prop: 'stationName',
          resourceId: '/web/order-management/charge-order-management/所属电站',
        },
        {
          label: '充电时长(分)',
          prop: 'chargeDuration',
          resourceId: '/web/order-management/charge-order-management/充电时长',
        },
        {
          label: '消费金额(元)',
          prop: 'billCost',
          resourceId: '/web/order-management/charge-order-management/消费金额',
        },
        {
          label: '订单状态',
          prop: 'orderStatus',
          formatter: (item) => {
            return orderStatus[item.orderStatus]
          },
          resourceId: '/web/order-management/charge-order-management/订单状态',
        },
        {
          label: '支付状态',
          prop: 'payStatus',
          formatter,
          resourceId: '/web/order-management/charge-order-management/支付状态',
        },
        {
          label: '申述状态',
          prop: 'appeal',
          formatter: (item) => {
            return item.appeal ? '是' : '否'
          },
          resourceId: '/web/order-management/charge-order-management/申述状态',
        },
        {
          label: '操作',
          resourceId: '/web/order-management/charge-order-management/操作',
          buttons: [
            {
              label: '查看详情',
              size: 'small',
              resourceId:
                '/web/order-management/charge-order-management/查看详情',
              click: (row) => {
                this.$router.push(`/order/detail/${row.billNum}`)
              },
            },
          ],
        },
      ],
    }
  },
  methods: {
    search(form) {
      console.log(form)
    },
    handleTableData(params) {
      console.log(params)
      if (params.orderStatus) {
        params.orderStatus = [params.orderStatus]
      }
      if (params.chargeDurationStart) {
        params.chargeDurationStart = Number(params.chargeDurationStart)
      }

      if (params.chargeDurationEnd) {
        params.chargeDurationEnd = Number(params.chargeDurationEnd)
      }
      if (params.area && params.area.province)
        params.province = params.area.province
      if (params.area && params.area.city) params.city = params.area.city
      if (params.area && params.area.district)
        params.district = params.area.district

      delete params.area

      this.loading = true

      chargeOrderList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {
        appealNum: '',
        startTime:
          new Date(
            new Date(new Date().toLocaleDateString()).getTime()
          ).valueOf() -
          30 * 24 * 3600 * 1000,
        endTime:
          new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1,
        area: [],
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.order-charge-time {
  display: flex;
  align-items: center;
  font-size: 14px;

  span {
    margin: 0 4px;
  }
  .el-input {
    width: 80px;
  }
}
</style>
<style lang="scss">
.order-date_picker_width {
  .date-picker-base {
    width: 300px;
  }
}

.order-radio-margin__top {
  margin-top: 23px;
  display: flex;
  align-items: center;
}

.order-timecard-list__duration {
  display: flex;
  align-items: center;

  .order-timecard-list__duration__seperator {
    width: 40px;
    height: 1px;
    margin: 0 10px;
    background: #000;
  }
}
</style>
